/* 改变主题色变量 */
$--color-primary: #01b27a;

$blue: #40a9ff;
$blue-1:#e6f7ff;
$blue-3:#91d5ff;
$blue-4:#69c0ff;

$green: #06B75E;
$yellow: #FF9900;
$red: #E62D2D;
$cyan:#17B9E6;
$puple: #8D43FF;


/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

html {
}
body {
  font-size: 14px;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.text {
  font-size: 14px;
}
.align-right {
  text-align: right;
}
/*table*/
.el-table {
  margin: 15px 0;
  th {
    background-color: #f8f8f9;
  }
  thead {
    color: #515a6e;
  }
}
/*pagination*/
.el-pagination {
  text-align: right;
  margin-bottom: 20px;
}
/*drawer*/
.el-drawer__header {
  border-bottom: 1px solid #e8eaec;
  padding: 10px 16px;
  margin: 0;
  line-height: 1;
  font-size: 14px;
  font-weight: 500;
  color: #17233d;
}
.el-drawer__body {
  //padding: 10px;
  font-size: 14px;
  overflow: auto;
}
.el-dialog__body {
  padding: 15px 20px;
  overflow: auto;
}
// flex布局：header\body\footer
// 基本结构：
/*
  <el-drawer class="flex-el-drawer">
    <div class="el-drawer__header"></div>
    <div class="el-drawer-content"></div>
    <div class="el-drawer-footer"></div>
  </el-drawer>
*/
.flex-el-drawer {
  .el-drawer__body {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100%;
    .el-drawer-content {
      padding: 10px;
      width: 100%;
      -moz-flex-grow: 1;
      -webkit-flex-grow: 1;
      flex-grow: 1;
      overflow: auto;
    }
    .el-drawer-footer {
      text-align: right;
      border-top: 1px solid #e8eaec;
      padding: 10px 18px;
      .el-button:first-child {
        margin-right: 10px;
      }
    }
  }
}
/*form*/
.el-form {
  &.search-form {
    .el-form-item {
      margin-bottom: 0;
    }
  }
  .el-select {
    width: 100%;
  }
  .el-form-item--mini .el-form-item__label {
    font-size: 13px;
  }
  &.el-form--label-top .el-form-item__label {
    padding-bottom: 0;
  }
}
/*card*/
.el-card {
  .el-card__header {
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    .content, &>.card-header {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      -webkit-box-pack: justify;
      -moz-justify-content: space-between;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      -webkit-box-align: center;
      -moz-align-items: center;
      -webkit-align-items: center;
      align-items: center;
    }
    /*
    position: relative;
    .card-header-btn {
      position: absolute;
      top: 50%;
      right: 12px;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
    }*/
  }
  &.tab-card {
    .el-card__body {
      padding-top: 5px;
    }
  }
}
/*steps*/
.el-steps {
  .el-step__title {
    font-size: 14px;
  }
}
/*dropmenu*/
.el-dropdown-menu--mini .el-dropdown-menu__item {
  text-align: center;
  padding: 3px 10px;
}
pre {
  margin: 0;
  //width: 100%;
  padding: 20px;
  background: #f5f7ff;
  overflow: auto;
  /*white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;*/
  box-sizing: border-box;
  text-align: left;
  line-height: 20px;
  code {
    border: none;
    background-color: transparent;
  }
}
.requirement-type-1 {
  color: #00BFBF;
}
.requirement-type-2 {
  color: #F59A23;
}
.requirement-type-3, .requirement-type-4 {
  color: #D9001B;
}



.main-container {
  padding: 15px;
  &>.el-card {
    .el-card__body {
      min-height: 60vh;
    }
  }
}
